<template>
  <div class="hiddenTroubleTable-root">
    <formTitleVue
      title="隐患统计信息"
    />
    <div class="search">
      <el-date-picker
        v-model="searchForm.time"
        type="month"
        value-format="yyyy-MM"
        @change="changeMonth">
      </el-date-picker>
      <el-button @click="handleExport" class="search-li" type="primary">导出数据</el-button>
    </div>
    <el-table
      :data="tableData"
      class="table"
      height="50vh"
      border
      style="width: 100%">
      <el-table-column
        prop="areaName"
        label="地市名称">
      </el-table-column>
      <el-table-column
        prop="hazardCountStr"
        label="隐患数量">
      </el-table-column>
      <el-table-column
        prop="shizhengTotal"
        label="市政设施">
      </el-table-column>
      <el-table-column
        prop="fangwuTotal"
        label="房屋建筑">
      </el-table-column>
      <el-table-column
        prop="jiaotongTotal"
        label="交通设施">
      </el-table-column>
      <el-table-column
        prop="renyuanTotal"
        label="人员密集区域"
        width="110px">
      </el-table-column>
      <el-table-column
        prop="gongdiTotal"
        label="在建工地">
      </el-table-column>
      <el-table-column
        prop="zhongdaTotal"
        label="重大风险">
      </el-table-column>
      <el-table-column
        prop="jiaodaTotal"
        label="较大风险">
      </el-table-column>
      <el-table-column
        prop="yibanTotal"
        label="一般风险">
      </el-table-column>
      <el-table-column
        prop="diTotal"
        label="低风险">
      </el-table-column>


    </el-table>
    <!-- <v-table
      :table-columns="tableColumns"
      :table-data="tableData"
      :loading="loading"
      :is-index="true"
      title=""
      maxHeight="30vh"
      ref="table"
    >
    </v-table> -->
  </div>
</template>
<script>
  import VTable from "@/components/VTable/index";
  import ButtonForm from "@/components/ButtonForm/index";
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import { time_select_optios } from '@/utils/global.js';
  import {
    riskHazardInfoStatistics,
    riskHazardInfoStatisticsExport
  } from '@/api/risk/riskHazard'
  export default {
    name: "riskTable",
    components: {
      VTable,
      ButtonForm,
      formTitleVue,
    },
    data() {
      return {

        tableData: [],
        loading: false,
        buttonList: [{name:'导出数据',methods:'handleExport', type:'primary'}],

        searchForm: {
          time: new Date().getFullYear() + "-" + (new Date().getMonth() + 1),// 当前月份
          startTime: this.$dayjs().startOf("month").format("YYYY-MM-DD"),
          endTime: this.$dayjs().endOf("month").format("YYYY-MM-DD"),
          areaCode:'',
          placeType:''
        },
      };
    },
    methods: {
      changeMonth(item){
        console.log(item)
        this.searchForm.startTime=this.$dayjs(item).startOf("month").format("YYYY-MM-DD")
        this.searchForm.endTime=this.$dayjs(item).endOf("month").format("YYYY-MM-DD")
        this.getData();
      },
      // 触发按钮区域按钮方法
      clickButton(methods) {
        this[methods]();
      },
      handleExport() {
        riskHazardInfoStatisticsExport(
          this.searchForm,
          `隐患统计信息_${new Date().getTime()}.xlsx`
        );
      },
      getData() {
        this.loading = true;
        this.searchForm.areaCode = this.$store.state.account.user.deptIds;
        this.searchForm.placeType = this.$commonJs.getPlaceType(this.searchForm.areaCode);
        riskHazardInfoStatistics(this.searchForm).then((res) => {
          this.tableData=res.data
          this.loading = false

        });

      },
    },
    mounted() {
      this.getData();
    },
  };
</script>

<style lang="scss" scoped>
.hiddenTroubleTable-root {
  .search{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    padding-top: 0;
  }
  .table {
    // height: 30vh;
  }
}

::v-deep .table-col-select-container{
  // display: none;
}
</style>
